<template>
  <div>
    <div>
      <el-menu :default-active="activeIndex"
               class="el-menu-demo"
               mode="horizontal"
               @select="handleSelect">
        <el-menu-item index="1"> <i class="el-icon-menu" />黄金品类</el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-plus" />
            新增打包单
          </template>
          <el-menu-item index="2-1">
            <router-link to="/sale/soAccountList"
                         tag="span">去选货单打包</router-link>
          </el-menu-item>
          <!-- <el-menu-item index="2-1">
            <router-link to="/menu/packingbyupstreamorder"
                         tag="span">按上游单打包</router-link>
          </el-menu-item> -->
        </el-submenu>
        <el-menu-item index="3"
                      class="el-icon-printer">
          导出
        </el-menu-item>

        <el-col :span="6">
          <el-date-picker v-model="date"
                          @blur="searchDate(date)"
                          type="daterange"
                          format="yyyy-MM-dd"
                          value-format="timestamp"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-input v-model="packingListVo.packingNumber"
                    placeholder="请输入打包单号"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary"
                     @click="search"
                     icon="el-icon-search">搜索</el-button>

        </el-col>
        <el-col :span="3">
          <el-button :circle="true"
                     icon="el-icon-delete-solid"></el-button>
          <el-button :circle="true"
                     icon="el-icon-refresh"></el-button>

        </el-col>
      </el-menu>

    </div>
    <!-- 选货单列表 -->
    <div>
      <el-table :data="selectorderlist"
                style="width: 100%">
        <el-table-column type="index"
                         label="序号"
                         width="50">
        </el-table-column>
        <el-table-column prop="packingNumber"
                         label="打包单号"
                         width="180">
        </el-table-column>
        <el-table-column prop="customer"
                         label="客户">
        </el-table-column>
        <el-table-column prop="region"
                         label="区域">
        </el-table-column>
        <el-table-column prop="packingStatus"
                         label="状态">
        </el-table-column>

        <el-table-column prop="weight"
                         label="重量">
        </el-table-column>
        <el-table-column prop="nums"
                         label="数量">
        </el-table-column>

        <el-table-column prop="processCost"
                         label="附加工费">
        </el-table-column>

        <el-table-column prop="createdTime"
                         label="制单时间"
                         width="100px">
          <template slot-scope="scope">
            {{scope.row.createdTime.substring(0, 19)
              .replace('T', ' ')}}
          </template>
        </el-table-column>

        <el-table-column label="操作"
                         width="200">

          <template slot-scope="scope">
            <el-button size="small"
                       type="primary"
                       @click="detail(scope.row.id,scope.row.packingStatus)">查看</el-button>

            <el-button size="small"
                       type="success"
                       @click="gopay(scope.row.id,scope.row.packingStatus)">去结算</el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>
    <div>
      共多少<font v-model="datanum">{{datanum}}</font>条数据
      <div class="page">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage4"
                       :page-sizes="[100, 200, 300, 400]"
                       :page-size="100"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="400">
        </el-pagination>
      </div>
    </div>
    <el-button size="small"
               type="success"
               @click="testFeign()">测试微服务调用</el-button>
    <el-button size="small"
               type="success"
               @click="testRabbitMQ1()">测试RabbitMQ1</el-button>
               <el-button size="small"
               type="success"
               @click="testRabbitMQ2()">测试RabbitMQ2</el-button>
  </div>
</template>

<script>
// 导入相依组件
import packingList from '@/api/sale/packing/packingList'
export default {
  components: {},

  data() {
    return {
      value1: '',
      input: '',
      //用于时间选择器
      date: '',
      //当前页数
      pageNum: '1',
      pageSize: '3',
      packingListVo: {
        packingNumber: '',
        preDate: '',
        nextDate: '',
      },
      //打包列表数据
      selectorderlist: [],
      datanum: '12',
      //rabbitMQ测试对象
      rabbitMQ:{
        m:123,
        q:456
      }
    }
  },
  methods: {
    //测试rabbitMQ1
    testRabbitMQ1(){
      packingList.testRabbitMQ1().then((res)=>{
        console.log(res);
      })
    },
     //测试rabbitMQ2
    testRabbitMQ2(){
      packingList.testRabbitMQ2().then((res)=>{
        console.log(res);
      })
    },
    //测试微服务调用
    testFeign() {
      packingList.testFeign().then((res) => {
        console.log('测试调用其他微服务模块')
        console.log(res)
      })
    },

    //去结算将打包单id传到结算界面
    gopay(id, packingStatus){
      console.log(id);
      this.$router.push({
        path: '/amountManager',
        query: {
          id: id,
        },
      })
    },
    //查看打包单详情
    detail(id, packingStatus) {
      this.$router.push({
        path: '/packdetail',
        query: {
          id: id,
        },
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      console.log(`每页 ${val} 条`)
      this.startPages()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      console.log(`当前页: ${val}`)
      this.startPages()
    },
    search() {
      //按输入入库编号查
      this.startPages()
    },
    searchDate(date) {
      //按时间查询
      this.packingListVo.preDate = date[0]
      this.packingListVo.nextDate = date[1]
    },
    startPages() {
      packingList
        .selectAll(this.pageNum, this.pageSize, this.packingListVo)
        .then((res) => {
          console.log(res)
          let data2 = res.data.list
          //数据过滤
          for (const i in data2) {
            if (data2[i].customer == 1) {
              data2[i].customer = '中国黄金'
            }
            if (data2[i].customer == 2) {
              data2[i].customer = '老凤祥'
            }
            if (data2[i].customer == 3) {
              data2[i].customer = '周大福'
            }
            if (data2[i].region == 4) {
              data2[i].customer = '盛丰黄金'
            }
            if (data2[i].region == 1) {
              data2[i].region = '华南区域'
            }
            if (data2[i].region == 2) {
              data2[i].region = '东北区域'
            }
            if (data2[i].region == 3) {
              data2[i].region = '西南区域'
            }
            if (data2[i].packingStatus == 1) {
              data2[i].packingStatus = '编辑'
            }
            if (data2[i].packingStatus == 2) {
              data2[i].packingStatus = '待审核'
            }
            if (data2[i].packingStatus == 3) {
              data2[i].packingStatus = '进行中'
            }
            if (data2[i].packingStatus == 4) {
              data2[i].packingStatus = '完成'
            }
          }
          this.datanum = res.data.totalCount
          this.selectorderlist = data2
        })
    },
  },
  //发请求
  created() {
    this.startPages()
  },
}
</script>

<style scoped>
.time {
  margin-top: 10px;
  margin-left: 900px;
}
.page {
  float: right;
}
</style>
